<!DOCTYPE html>
<html>
<head>
<title>树形关系表</title>
<#include "/header.html">
</head>
<body>
	<div id="rrapp" v-cloak>
		<div v-show="showList">
			<!-- 按钮 -->
			<div class="grid-btn">
				<a class="btn btn-primary" @click="test"><i class="fa fa-plus"></i>&nbsp;测试按钮</a>
			</div>

			<!-- 选择菜单 -->
			<div id="iotsLayer" style=" float:left;;width:40%;padding: 10px;box-sizing:border-box;display:flex">
				<ul id="zGroupIOSTree" class="ztree" style="width: 50%"></ul>
				<div style="width: 50%">
					<input type="button" value='设备TAB'  @click="showTabTreeBtn1"/>
					<input type="button" value='数据包TAB'  @click="showTabTreeBtn2"/>
					<ul v-show="showTabTree1"  id="zIOSEquipmentTree" class="ztree"></ul>
					<ul v-show="showTabTree2"  id="zIOSWrapTree" class="ztree"></ul>
				</div>
			</div>
			
			<!-- group列表 -->
			<div v-show="showGroup" id="iotsList1" style="float:left;width:60%;" >
				<div>分组信息:</div>
				<div >
					<div class="form-group">
						<div class="col-sm-2 control-label">ID</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsGroup.id" readonly />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 control-label">父节点</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsGroup.parentid" readonly />
						</div>
					</div>
				</div>
			</div>
			
			<!-- IOServer列表 -->
			<div v-show="showIOServer" id="iotsList2" style="float:left;width:60%;" >
				<div>IOServer信息:</div>
				<div  >
					<div class="form-group">
						<div class="col-sm-2 control-label">ID</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="IOServer.id" readonly />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 control-label">名称</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="IOServer.name" readonly />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 control-label">IP和PROT</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="IOServer.ipAddress" readonly />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 control-label">采集周期</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="IOServer.cycle" readonly />
						</div>
					</div>
					<input id="startKIOS" type="button"  value="启动KIOServer">
					<input id="stopKIOS" type="button"  value="停止KIOServer">
					<input id="syncKIOS" type="button"  value="同步设备">
					<input id="syncWrap" type="button"  value="同步全部变量">
					<input id="ccc" type="button"  value="采集IOServer下所有变量">
				</div>
			</div>
			
			<!-- 设备列表 -->
			<div v-show="showEquipment" id="iotsList3" style="float:left;width:60%;" >
				<div>设备信息:</div>
				<div  >
					<div class="form-group">
						<div class="col-sm-2 control-label">ID</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsEquipmentInfo.id" readonly />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 control-label">名称</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsEquipmentInfo.name" readonly />
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">采集周期</div>
					<div class="col-sm-10">
						<input type="text" class="form-control" v-model="iotsVariable.acquisitionTime" placeholder="设置采集周期，单位为秒（s）"/>
					</div>
				</div>
				<input type="button" id='setTime' value='设置设备采集周期'/>
				<input type="button" id='ct' value='启动采集'/>
				<input type="button" id='cf' value='取消采集'/>
				<input type="button" id='ct' value='采集设备下所有变量'/>
				<input type="button" id='ct' value='设置变量采集周期'/>
				<table id="jqGridVar1"></table>
       		 	<div id="jqGridPagerVar1"></div>
			</div>
			
			<!-- 变量列表 -->
			<div v-show="showVariable" id="iotsList4" style="float:left;width:60%;" >
				<div>变量信息:</div>
				<div >
					<div class="form-group">
						<div class="col-sm-2 control-label">ID</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsVariable.id" readonly />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 control-label">名称</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsVariable.name" readonly />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 control-label">采集周期</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsVariable.acquisitionTime" placeholder="设置采集周期，单位为秒（s）"/>
						</div>
					</div>
					
				</div>
			</div>
			
			<!-- 数据包列表 -->
			<div v-show="showWrapInfo" id="iotsList5" style="float:left;width:60%;" >
				<div>变量信息:</div>
				<div id="group" name="分组">
					<div class="form-group">
						<div class="col-sm-2 control-label">ID</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsWrapInfo.id" readonly />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 control-label">名称</div>
						<div class="col-sm-10">
							<input type="text" class="form-control" v-model="iotsWrapInfo.name" readonly />
						</div>
					</div>
				</div>
				<input type="button" id='setTime' value='设置数据包采集周期'/>
				<input type="button" id='ct' value='启动采集'/>
				<input type="button" id='cf' value='取消采集'/>
				<input type="button" id='ct' value='采集数据包下所有变量'/>
				<table id="jqGridVar2"></table>
       		 	<div id="jqGridPagerVar2"></div>
			</div>
			
		</div>

	</div>

	<script
		src="${request.contextPath}/statics/js/modules/iots/iotsbusinesstreerelation.js?_${.now?long}"></script>
</body>
</html>